<template>
  <drawer
    width="200px;"
    :show.sync="drawerVisibility"
    :drawer-style="{'background-color':'#fff', width: '200px'}">

    <div slot="drawer" class="left-nav-box">
      <!-- 菜单内容 -->
      <left-mean @enlarge-text="meanclick"></left-mean>
    </div>
    <!-- main content -->
    <view-box ref="viewBox" body-padding-top="46px">
      <x-header style="width:100%;position:absolute;left:0;top:0;z-index:100;">
        <span>{{title}}</span>
        <!-- 判断路由是否是首页，首页就隐藏x-icon 显示x-header默认自带的返回 -->
        <x-icon v-if="this.$route.path === '/index'" slot="overwrite-left" type="navicon" size="35" @click="showleftmen" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
      </x-header>
      <transition name="fade" mode="out-in">
        <router-view class="router-view"></router-view>
      </transition>
    </view-box>
  </drawer>
</template>

<script>
  import { Drawer, Group, Cell, ViewBox, XHeader } from 'vux'
  import LeftMean from '@/components/leftmean'
    export default {
      name: "layout",
      components: {
        Drawer,
        Group,
        Cell,
        ViewBox,
        XHeader,
        LeftMean
      },
      computed: {
        title () {  //页面标题
          return this.$route.meta.title
        },
      },
      data () {
        return {
          drawerVisibility: false
        }
      },
      methods: {
        showleftmen: function () {
          this.drawerVisibility = true
        },
        meanclick: function (v) {
          //隐藏左侧栏
          this.drawerVisibility = false
          //路由跳转
          this.$router.push({ path: v.path })
        },
      }
    }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  body {
    background-color: #fbf9fe;
  }
  .left-nav-box{
    height: 100%;
  }
</style>
